﻿<html>
<head>
    <title>Panel - jQuery MiniUI 3.0 Documentation</title>    

    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    <meta name="keywords" content="jquery,datagrid,grid,表格控件,ajax,web开发,java开发,.net开发,tree,table,treegrid" />
    <meta name="description" content="jQuery MiniUI - 专业WebUI控件库。jQuery MiniUI是使用Javascript实现的前端Ajax组件库，支持所有浏览器，可以跨平台开发，如Java、.Net、PHP等。" />

    <link href="css/common.css" rel="stylesheet" type="text/css" />
    <script src="core.js" type="text/javascript"></script>
    
        

</head>
<body>
    <h3>mini.Panel</h3>
    
    <p>标题面板。</p>

    <h4>Extend</h4>
    <p> <a class="extendlink" href="control.html">mini.Control</a></p>    

    <h4>Usage</h4>
<pre class="code"><span style="color:blue">&lt;</span><span style="color:maroon">div </span><span style="color:red">class</span><span style="color:blue">="mini-panel" </span><span style="color:red">title</span><span style="color:blue">="header" </span><span style="color:red">iconCls</span><span style="color:blue">="icon-add" </span><span style="color:red">style</span><span style="color:blue">="</span><span style="color:red">width</span><span style="color:blue">:300px;</span><span style="color:red">height</span><span style="color:blue">:200px;" 
    </span><span style="color:red">showToolbar</span><span style="color:blue">="true" </span><span style="color:red">showCloseButton</span><span style="color:blue">="true" </span><span style="color:red">showFooter</span><span style="color:blue">="true"
&gt;
    </span><span style="color:#006400">&lt;!--toolbar--&gt;
    </span><span style="color:blue">&lt;</span><span style="color:maroon">div </span><span style="color:red">property</span><span style="color:blue">="toolbar"&gt;
        &lt;</span><span style="color:maroon">input </span><span style="color:red">type</span><span style="color:blue">='button' </span><span style="color:red">value</span><span style="color:blue">='Toolbar' </span><span style="color:red">style</span><span style="color:blue">='</span><span style="color:red">vertical-align</span><span style="color:blue">:middle;'/&gt;
    &lt;/</span><span style="color:maroon">div</span><span style="color:blue">&gt;
    </span><span style="color:#006400">&lt;!--footer--&gt;
    </span><span style="color:blue">&lt;</span><span style="color:maroon">div </span><span style="color:red">property</span><span style="color:blue">="footer"&gt;
        &lt;</span><span style="color:maroon">input </span><span style="color:red">type</span><span style="color:blue">='button' </span><span style="color:red">value</span><span style="color:blue">='Footer' </span><span style="color:red">style</span><span style="color:blue">='</span><span style="color:red">vertical-align</span><span style="color:blue">:middle;'/&gt;
    &lt;/</span><span style="color:maroon">div</span><span style="color:blue">&gt;
    </span><span style="color:#006400">&lt;!--body--&gt;
    </span>body<span style="color:blue">&lt;</span><span style="color:maroon">br </span><span style="color:blue">/&gt;
    </span>1<span style="color:blue">&lt;</span><span style="color:maroon">br </span><span style="color:blue">/&gt;</span>1<span style="color:blue">&lt;</span><span style="color:maroon">br </span><span style="color:blue">/&gt;</span>1<span style="color:blue">&lt;</span><span style="color:maroon">br </span><span style="color:blue">/&gt;</span>1<span style="color:blue">&lt;</span><span style="color:maroon">br </span><span style="color:blue">/&gt;</span>1<span style="color:blue">&lt;</span><span style="color:maroon">br </span><span style="color:blue">/&gt;</span>1<span style="color:blue">&lt;</span><span style="color:maroon">br </span><span style="color:blue">/&gt;</span>1<span style="color:blue">&lt;</span><span style="color:maroon">br </span><span style="color:blue">/&gt;</span>1<span style="color:blue">&lt;</span><span style="color:maroon">br </span><span style="color:blue">/&gt;</span>1<span style="color:blue">&lt;</span><span style="color:maroon">br </span><span style="color:blue">/&gt;</span>1<span style="color:blue">&lt;</span><span style="color:maroon">br </span><span style="color:blue">/&gt;</span>1<span style="color:blue">&lt;</span><span style="color:maroon">br </span><span style="color:blue">/&gt;</span>1<span style="color:blue">&lt;</span><span style="color:maroon">br </span><span style="color:blue">/&gt;</span>1<span style="color:blue">&lt;</span><span style="color:maroon">br </span><span style="color:blue">/&gt;</span>1<span style="color:blue">&lt;</span><span style="color:maroon">br </span><span style="color:blue">/&gt;</span>1<span style="color:blue">&lt;</span><span style="color:maroon">br </span><span style="color:blue">/&gt;</span>1<span style="color:blue">&lt;</span><span style="color:maroon">br </span><span style="color:blue">/&gt;
&lt;/</span><span style="color:maroon">div</span><span style="color:blue">&gt;
</span></pre>

    <h4>Screenshots</h4>
    <img src="images/panel.gif" />

    <h4>Examples</h4>
    <a class="demo" href="../../demo/panel/panel.html" target="_blank">Panel</a>

    <h4>Properties</h4>
    <table>
        <tr><th>Name</th><th>Type</th><th>Description</th><th>Default</th><th><a href="setsupport.html" target="_blank" style="padding-left:5px;padding-right:5px;"> Set? </a></th><th><a href="getsupport.html" target="_blank" style="padding-left:5px;padding-right:5px;"> Get? </a></th><th><a href="tagsupport.html" target="_blank" style="padding-left:5px;padding-right:5px;"> Tag? </a></th></tr>
        <tr>
            <td>title</td>
            <td>String</td>
            <td>标题文本</td>
            <td></td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr>        
        <tr>
            <td>iconCls</td>
            <td>String</td>
            <td>标题图标样式类</td>
            <td></td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr>
        <tr>
            <td>iconStyle</td>
            <td>String</td>
            <td>标题图标样式</td>
            <td></td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr>
        <tr>
            <td>showHeader</td>
            <td>Boolean</td>
            <td>是否显示头部</td>
            <td>true</td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr>
        <tr>
            <td>showToolbar</td>
            <td>Boolean</td>
            <td>是否显示工具栏</td>
            <td>false</td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr>
        <tr>
            <td>showFooter</td>
            <td>Boolean</td>
            <td>是否显示底部</td>
            <td>false</td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr>

        <tr>
            <td>showCloseButton</td>
            <td>Boolean</td>
            <td>是否显示关闭按钮</td>
            <td>false</td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr>
        <tr>
            <td>showCollapseButton</td>
            <td>Boolean</td>
            <td>是否显示折叠按钮</td>
            <td>false</td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr>
        <tr>
            <td>headerStyle</td>
            <td>String</td>
            <td>头部样式。</td>
            <td></td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr>
        <tr>
            <td>headerCls</td>
            <td>String</td>
            <td>头部样式类。</td>
            <td></td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr>
        <tr>
            <td>bodyStyle</td>
            <td>String</td>
            <td>内容区样式。如"padding:0px;"</td>
            <td></td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr>
        <tr>
            <td>bodyCls</td>
            <td>String</td>
            <td>内容区样式类。</td>
            <td></td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr>
        <tr>
            <td>footerStyle</td>
            <td>String</td>
            <td>底部样式。如"padding:0px;"</td>
            <td></td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr>
        <tr>
            <td>footerCls</td>
            <td>String</td>
            <td>底部样式类。</td>
            <td></td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr>
        <tr>
            <td>toolbarStyle</td>
            <td>String</td>
            <td>工具栏样式。如"padding:0px;"</td>
            <td></td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr>
        <tr>
            <td>toolbarCls</td>
            <td>String</td>
            <td>工具栏样式类。</td>
            <td></td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr>
        <tr>
            <td>url</td>
            <td>String</td>
            <td>内容区域地址</td>
            <td></td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr>
        <tr>
            <td>refreshOnExpand</td>
            <td>Boolean</td>
            <td>展开则不断刷新。</td>
            <td>false</td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr>  
        <tr>
            <td>maskOnLoad</td>
            <td>Boolean</td>
            <td>加载时遮罩。</td>
            <td>true</td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr>    
        <tr>
            <td>expanded</td>
            <td>Boolean</td>
            <td>折叠状态</td>
            <td>true</td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr>  
        <tr>
            <td>collapseOnTitleClick</td>
            <td>Boolean</td>
            <td>点击头部时折叠展开</td>
            <td>false</td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr> 
        
        
        <tr>
            <td>loadingMsg</td>
            <td>String</td>
            <td>加载提示文字</td>
            <td>"Loading..."</td>
            <td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td><td style="text-align:center;">&radic;</td>
        </tr> 
        
        
    </table>

    <h4>Methods</h4>
    <table>
        <tr><th>Name</th><th>Parameter</th><th>Description</th><th>Return</th></tr>
        <tr>
            <td>getHeaderEl ( )</td>
            <td></td>
            <td>获取头部DOM对象</td>
            <td>Element</td>
        </tr>
        <tr>
            <td>getToolbarEl ( )</td>
            <td></td>
            <td>获取工具栏DOM对象</td>
            <td>Element</td>
        </tr>
        <tr>
            <td>getFooterEl ( )</td>
            <td></td>
            <td>获取底部DOM对象</td>
            <td>Element</td>
        </tr>    
        <tr>
            <td>getBodyEl ( )</td>
            <td></td>
            <td>获取内容区对象</td>
            <td>Element</td>
        </tr> 
        <tr>
            <td>getIFrameEl ( )</td>
            <td></td>
            <td>获取内容IFrame对象</td>
            <td>Element</td>
        </tr> 
        <tr>
            <td>load ( url, onLoad, onDestroy )</td>
            <td>onLoad, onDestroy为回调函数。<br />                
            </td>
            <td>加载内容区域</td>
            <td></td>
        </tr>
        <tr>
            <td>setBody ( Element )</td>
            <td></td>
            <td>把DOM元素加入内容区</td>
            <td></td>
        </tr>
        <tr>
            <td>setToolbar ( Element )</td>
            <td></td>
            <td>把DOM元素加入工具栏</td>
            <td></td>
        </tr>
        <tr>
            <td>setFooter ( Element )</td>
            <td></td>
            <td>把DOM元素加入底部</td>
            <td></td>
        </tr>
    </table>

    <h4>Events</h4>
    <table>
        <tr><th>Name</th><th>EventObject</th><th>Description</th></tr>
        <tr>
            <td>beforebuttonclick</td>
            <td>
<pre>
{
    sender: Object, 
    name: String,   //按钮类型：close,collapse
    cancel: Boolean 
}
</pre>            
            </td>
            <td>点击右上角按钮前激发</td>
        </tr>
        <tr>
            <td>buttonclick</td>
            <td>
<pre>
{
    sender: Object, 
    name: String
}
</pre>             
            </td>
            <td>点击右上角按钮后激发</td>
        </tr>
        <tr>
            <td>load</td>
            <td></td>
            <td>内容加载完成时激发</td>
        </tr>
        
    </table>

</body>
</html>
